<template>
	<s-layout navbar="custom">
		<view class="title-container">
			<image src="/static/images/tiku_right_pot.png" class="title-icon left-icon" mode="widthFix" />
			<view class="title-text">正在报名</view>
			<image src="/static/images/tiku_left_pot.png" class="title-icon right-icon" mode="widthFix" />
		</view>

		<view class="zzbm">
			<view class="container" v-for="(item, index) in state.data.comeing_list"
				@click="sheep.$router.go('/pages/goods/gkk/detail', { id: item.id })">
				<image class="activity-image" :src="sheep.$url.cdn(item.image)" mode="widthFix" />
				<view class="activity-content">
					<view class="activity-title">{{ item.title }}</view>
					<view class="activity-description">{{ item.subtitle }}</view>
					<view class="activity-time">
						<view>{{ sheep.$helper.timeFormat(item.start_time, 'yyyy-mm-dd hh:MM') }}</view>
						<view><button class="ss-reset-button bm-button">免费报名</button></view>
					</view>
				</view>
			</view>
		</view>

		<view class="title-container">
			<image src="/static/images/tiku_right_pot.png" class="title-icon left-icon" mode="widthFix" />
			<view class="title-text">往期回放</view>
			<image src="/static/images/tiku_left_pot.png" class="title-icon right-icon" mode="widthFix" />
		</view>

		<view class="wqhf">
			<view class="container" v-for="(item, index) in state.data.previous_list"
				@click="sheep.$router.go('/pages/goods/gkk/detail', { id: item.id })">
				<image class="activity-image" :src="sheep.$url.cdn(item.image)" mode="widthFix" />
				<view class="activity-content">
					<view class="activity-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';

	const state = reactive({
		data: []
	});

	onLoad((options) => {
		sheep.$api.course.listgkk().then((res) => {
			if (res.code === 1) {
				console.log(111)
				console.log(res.data);
				state.data = res.data;
			}
		})
	});
</script>

<style lang="scss" scoped>
	.title-container {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		margin: 20px auto;

		.title-icon {
			width: 50px;
			margin: 0 15px;
		}

		.title-text {
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}

		.left-icon {
			order: -1;
			/* 将左图标置于最左侧 */
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 14px 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.activity-image {
		width: 100%;
		height: 300px;
		border-radius: 10px;
	}

	.activity-content {
		padding: 10px;
	}

	.activity-title {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: bold;
		margin-top: 10px;
	}

	.activity-description {
		font-size: 14px;
		color: #555;
		margin-bottom: 20px;
	}

	.activity-time {
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #888888;
	}

	.bm-button {
		width: 75px;
		background: linear-gradient(to right, rgb(233, 180, 97), rgb(238, 204, 137));
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.wqhf {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.wqhf .container {
		width: 45%;
	}

	.wqhf .activity-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 注意：在多行情况下，这个属性本身不起作用，但写上无妨 */
		height: 40px;
		/* 根据行数（line-height * line-clamp）和字体大小调整高度 */
		line-height: 20px;
		/* 每行的高度，确保与height和-webkit-line-clamp相匹配 */
	}

</style>